<template>
    <div class="site-catogary">
        <ul class="catogary-ul">
            <li>
                <span class="catogary-title">手机</span>
                <a-icon type="right" class="catogary-rig" />
            </li>
            <li>
                <span class="catogary-title">电视</span>
                <a-icon type="right" class="catogary-rig" />
            </li>
            <li>
                <span class="catogary-title">笔记本 平板</span>
                <a-icon type="right" class="catogary-rig" />
            </li>
            <li>
                <span class="catogary-title">家电</span>
                <a-icon type="right" class="catogary-rig" />
            </li>
            <li>
                <span class="catogary-title">出行 穿戴</span>
                <a-icon type="right" class="catogary-rig" />
            </li>
            <li>
                <span class="catogary-title">智能 路由器</span>
                <a-icon type="right" class="catogary-rig" />
            </li>
            <li>
                <span class="catogary-title">电源 配件</span>
                <a-icon type="right" class="catogary-rig" />
            </li>
            <li>
                <span class="catogary-title">健康 儿童</span>
                <a-icon type="right" class="catogary-rig" />
            </li>
            <li>
                <span class="catogary-title">耳机 音箱</span>
                <a-icon type="right" class="catogary-rig" />
            </li>
            <li>
                <span class="catogary-title">生活 箱包</span>
                <a-icon type="right" class="catogary-rig" />
            </li>
        </ul>
        <SiteDrawer></SiteDrawer>
    </div>
</template>

<script>
import SiteDrawer from './SiteDrawer';
import '../utils/sitedrawer';

export default {
    name: 'SiteCatogary',
    components: {SiteDrawer}
}
</script>

<style lang="less" scoped>
.site-catogary {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 234px;
    height: 100%;
    background-color: rgba(105,101,101,.6);

    .catogary-ul {
        width: 100%;
        height: 100%;
        padding: 20px 0;
        box-sizing: border-box;

        li {
            position: relative;
            width: 100%;
            height: 42px;
            padding-left: 30px;
            box-sizing: border-box;
            font-size: 16px;
            line-height: 42px;
            color: #fff;

            &:hover {
                background-color: #ff6700;
            }

            .catogary-rig {
                position: absolute;
                z-index: 1;
                top: 13px;
                right: 20px;
            }
        }
    }
}
</style>